<script setup>
import { ref } from 'vue'

const videoUrl = ref('')
const downurl = ref('')
const err_text = ref('')

const get_url = async () => {
  try {
    const data = await window.api.parseVideoUrl(videoUrl.value, '')
    if (data.status != '200') {
      err_text.value = data.message || '解析失败，请检查链接是否正确'
      downurl.value = ''
      return
    }
    if (data.status == '200') {
      let downloadVideoUrl = data.data.videoUrls
      downurl.value = downloadVideoUrl
      videoUrl.value = ''
      err_text.value = ''
      if (!data.data.isVideo) {
        err_text.value = '暂不支持非视频链接解析，如图片，音频等'
        downurl.value = ''
        return
      }
    }
  } catch {
    err_text.value = '解析失败，请检查链接是否正确'
    downurl.value = ''
  }
}

const download = () => {
  if (!downurl.value) {
    // alert('请先解析链接')
    err_text.value = '请先解析链接'
    downurl.value = ''
    return
  }

  open(downurl.value, '_blank')
}
</script>

<template>
  <div>
    <div class="top">
      <h1>欢迎使用 <span>video-download</span></h1>
      <h3>支持全网主流平台</h3>
    </div>

    <div class="content">
      <div class="input-group">
        <input v-model="videoUrl" required="" type="text" autocomplete="off" class="input" />
        <label class="user-label">请输入视频链接</label>
      </div>

      <button>
        <span class="shadow"></span>
        <span class="edge"></span>
        <span class="front text" @click="get_url"> 解析链接 </span>
      </button>

      <button v-if="downurl" class="button" @click="download">
        <span class="button_lg">
          <span class="button_sl"></span>
          <span class="button_text">解析完成，去下载</span>
        </span>
      </button>

      <p v-if="err_text" class="error">{{ err_text }}</p>
    </div>

    <div class="footer">
      <p>
        作者微信：angeian05
        <a
          href="https://dx3c1myvxmq.feishu.cn/docx/NA0SdmQRBopqYXxUfmlcYN8KnYX?from=from_copylink"
          target="_blank"
          >赞助作者 使用教程</a
        >
      </p>
    </div>
  </div>
</template>
